<template>
  <div class="wallet">
    <div class="title-box">我的钱包</div>

    <div class="card-box">
      <div class="card">
        <div class="main-bg">
          <div class="main u-flex">
            <div class="info-box">
              <div class="name">总金额（众币）</div>
              <div class="price">{{ info.total_amout }}</div>
              <div class="info u-flex">
                <div>
                  <div class="name">可提现 (众币)</div>
                  <div class="money">{{ info.withdraw_amount }}</div>
                </div>

                <div>
                  <div class="name">不可提现 (众币)</div>
                  <div class="money">{{ info.non_withdraw_amount }}</div>
                </div>
              </div>
            </div>
            <div class="btn-box">
              <div class="btn-1" @click="moneyIn()">充值</div>
              <div class="btn-2" @click="moneyOut()">提现</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="list">
      <div class="title">
        <div class="line"></div>
        <div class="text">金额明细</div>
      </div>

      <div class="item u-flex-bet" v-for="item in history">
        <div class="info">
          <div class="name">{{ item.resaon }}</div>
          <div class="time">{{ item.create_time_text }}</div>
        </div>

        <div class="money">{{ item.amount }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import header from "@/components/header/header.vue";
import { Field } from "vant";
import { Image as VanImage } from "vant";
import { MINE_MONNEY, LIST_ACCOUNT, ORDER_MONEY } from "@/api/api.js";
// import { Field } from 'vant';
Vue.use(Field);
Vue.use(VanImage);
export default {
  name: "wallet",
  components: {
    [header.name]: header,
  },
  data() {
    return {
      info: "",
      accountInfo: "",
      history: [],
    };
  },
  mounted() {
    this.getInfo();
    this.getDetail();
  },
  methods: {
    async getInfo() {
      const { data } = await this.$reqGet(MINE_MONNEY, {});
      if (data.status == 1) {
        let info = data.data;
        console.log(info);
        this.info = info;
      }
    },
    async getDetail() {
      const { data } = await this.$reqGet(ORDER_MONEY, {});
      if (data.status == 1) {
        let info = data.data;
        console.log(info);
        this.history = info;
      }
    },
    moneyOut() {
      this.$router.push({
        name: "walletOut",
        query: { data: this.info.withdraw_amount },
      });
    },
    moneyIn() {
      this.$router.push({ name: "recharge" });
    },
  },
};
</script>

<style lang="scss" scoped>
.wallet {
  min-height: 100vh;
  background-image: url("../../assets/images/wallet/bgphoto@2x.png");
  background-repeat: no-repeat;
  padding: 0 24rem;
  background-size: 100% 468rem;
  text-align: left;
  background-color: #f5f5f5;
  padding-bottom: 166rem;

  .title-box {
    font-size: 36rem;
    color: #fff;
    text-align: center;
    font-weight: bold;
    padding-top: 20rem;
    margin-bottom: 42rem;
    position: fixed;
    width: 100%;
    height: 88rem;
    left: 0;
    background-color: var(--theme);
    z-index: 999;
  }

  .card-box {
    padding-top: 116rem;
    .card {
      height: 336rem;
      border-radius: 20rem;
      overflow: hidden;

      .main-bg {
        width: 100%;
        height: 100%;
        border-radius: 20rem;
        background-color: rgba(94, 150, 254, 0.9);

        .main {
          padding: 48rem;
          color: #fff;
          font-size: 24rem;

          .info-box {
            .name {
              opacity: 0.7;
            }

            .price {
              font-size: 60rem;
              margin: 24rem 0;
            }

            .info {
              > div {
                margin-right: 48rem;
                text-align: center;

                .name {
                  opacity: 0.7;
                }

                .money {
                  font-size: 32rem;
                  margin-top: 8rem;
                  font-weight: bold;
                }
              }
            }
          }

          .btn-box {
            font-size: 32rem;
            text-align: center;

            .btn {
              &-1 {
                width: 172rem;
                height: 76rem;
                border-radius: 38rem;
                background-color: #fff;
                color: var(--theme);
                line-height: 76rem;
                font-weight: bold;
                margin-bottom: 24rem;
              }

              &-2 {
                width: 172rem;
                height: 76rem;
                border-radius: 38rem;
                color: #fff;
                border: 1rem solid #fff;
                line-height: 76rem;
                font-weight: bold;
              }
            }
          }
        }
      }
    }
  }

  .list {
    margin-top: 44rem;
    .title {
      position: relative;
      margin-bottom: 24rem;

      .text {
        font-size: 32rem;
        font-weight: bold;
        position: relative;
      }

      .line {
        position: absolute;
        left: 0;
        bottom: 0;
        content: "";
        width: 128rem;
        height: 12rem;
        background-color: var(--theme);
      }
    }

    .item {
      background-color: #fff;
      border-radius: 20rem;
      padding: 24rem;
      margin-bottom: 24rem;

      .name {
        font-size: 32rem;
        font-weight: bold;
        margin-bottom: 8rem;
      }

      .time {
        font-size: 20rem;
        color: #cccfd4;
      }

      .money {
        color: #ff4343;
        font-weight: bold;
        font-size: 36rem;
      }
    }
  }
}
</style>
